<template>
  <div class="DiFangZhi">
    <div class="DiFangZhiHeader">当前位置：首页 > 地方志</div>
    <div class="Index">
      <div class="IndexLeft">
        <div class="IndexLeftTitle">地方志：32200册</div>
        <!-- <div>
          <div v-for="(item, index) in data" :key="index">
            <div class="FontTitle">{{item.Title}}</div>
            <div v-for="(item, index) in item.Value" :key="index">{{item}}</div>
          </div>
        </div> -->
      </div>
      <div class="IndexRight">
        <div class="IndexRightHeader">
          <div class="IndexRightHeaderTop">
            <div>已选：</div>
            <div>
              <div class="DIming">湖北</div>
            </div>
          </div>
          <div class="IndexRightHeaderBottom">搜索结果：共4860 条</div>
        </div>
        <div class="IndexRightIndex">
          <div class="IndexRightIndexNeiRong">
            <div></div>
            <div class="IndexRightIndexNeiRongRight">
              <div>盛京通志三二卷.清康熙23</div>
              <div>莫妮卡 上传时间：2018年5</div>
              <div>阅读数：20103次</div>
              <div>阅读全文</div>
            </div>
          </div>
          <div class="IndexRightIndexNeiRong">
            <div></div>
            <div class="IndexRightIndexNeiRongRight">
              <div>盛京通志三二卷.清康熙23</div>
              <div>莫妮卡 上传时间：2018年5</div>
              <div>阅读数：20103次</div>
              <div>阅读全文</div>
            </div>
          </div>
          <div class="IndexRightIndexNeiRong">
            <div></div>
            <div class="IndexRightIndexNeiRongRight">
              <div>盛京通志三二卷.清康熙23</div>
              <div>莫妮卡 上传时间：2018年5</div>
              <div>阅读数：20103次</div>
              <div>阅读全文</div>
            </div>
          </div>
        </div>
        <div class="FenYe">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { DiFangZhiData } from "../assets/Data.js";
export default {
  name: "home",

  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      data: []
    };
  },
  mounted() {
    this.data = DiFangZhiData;
  }
};
</script>
<style scoped>
.DiFangZhi {
  padding: 23px 0 63px 0;
  margin: 0 auto;
  width: 1200px;
}
.DiFangZhiHeader {
  width: 173px;
  text-align: center;
  font-size: 15px;
  padding-bottom: 23px;
}
.Index {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  height: 913px;
}
.IndexLeft {
  width: 320px;
  background: #f2f2f2;
  margin-right: 20px;
  padding: 34px 29px 55px 34px;
}
.IndexLeftTitle {
  font-size: 24px;
  font-weight: bold;
  color: rgba(52, 52, 52, 1);
  padding-bottom: 32px;
}
.IndexRight {
  width: 860px;
  background: #ffffff;
  border: 1px solid rgba(209, 209, 209, 1);
  padding: 32px 37px 36px 58px;
}
.IndexRightHeader {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f3;
}
.IndexRightHeaderTop {
  display: flex;
  justify-content: flex-start;
  font-weight: 300;
  color: rgba(52, 52, 52, 1);
  line-height: 30px;
}
.IndexRightHeaderTop > div {
  font-weight: 300;
  color: rgba(52, 52, 52, 1);
  font-size: 15px;
}
.DIming {
  font-weight: 300;
  color: rgba(52, 52, 52, 1);
  font-size: 15px;
  width: 76px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(211, 211, 211, 1);
  border-radius: 5px 5px 5px 5px;
}
.IndexRightHeaderBottom {
  font-size: 15px;
  font-family: MicrosoftYaHeiLight;
  font-weight: 300;
  color: rgba(52, 52, 52, 1);
}
/* // ZUjian */
.IndexRightIndexNeiRong {
  padding-top: 36px;
  border-bottom: 1px solid #eef2f3;
  padding-bottom: 34px;
  display: flex;
  /* margin-left: 19px; */
}
.IndexRightIndexNeiRong > div:nth-child(1) {
  margin-left: 19px;
  width: 242px;
  height: 174px;
  background: #f2f2f2;
  margin-right: 40px;
}
.IndexRightIndexNeiRongRight > div:nth-child(1) {
  font-size: 20px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
  margin-bottom: 21px;
  text-align: left;
}
.IndexRightIndexNeiRongRight > div:nth-child(2),
.IndexRightIndexNeiRongRight > div:nth-child(3) {
  font-size: 15px;
  font-family: MicrosoftYaHeiLight;
  font-weight: 300;
  color: rgba(66, 97, 146, 1);
  text-align: left;
}
.IndexRightIndexNeiRongRight > div:nth-child(4) {
  width: 110px;
  height: 38px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(52, 52, 52, 1);
  width: 110px;
  height: 38px;
  background: #eef2f3;
  line-height: 38px;
  text-align: center;
  margin-top: 36px;
}
.FontTitle {
  font-size: 20px;
}
/* // ZUjian */
</style>
